<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>目的地</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/search.css">
</head>

<body>
    <!-- 整个目的地 的页面容器 -->
    <section id="search">
        <!-- 头部 -->
        <header>
            <!-- 顶部 -->
            <div class="top">
                <i></i>
                <p>选择目的地</p>
            </div>
            <!-- 顶部搜索框 -->
            <div class="search-box">
                <i></i>
                <span>春季旅游节</span>

            </div>
        </header>
        <!-- 内容部分 -->
        <section class="content">
            <!-- 左边栏导航 -->
            <div class="left-nav">
                <div class="hot unfold">
                    <i></i>
                    <p>热门</p>
                </div>
                <div class="inland">
                    <i></i>
                    <p>国内</p>
                </div>
                <div class="foreign">
                    <i></i>
                    <p>国外</p>
                </div>

            </div>
            <!-- 右边栏展示 -->
            <div class="right-nav">
                <div class="hot-nav unfold">
                    <ul>
                        <li>
                            <a href=""><img data-src="./images/img/search0407_01.jpg" alt=""></a>
                            <p>上海迪尼斯</p>
                        </li>
                        <li>
                            <a href=""><img data-src="./images/img/search0407_02.jpg" alt=""></a>
                            <p>云南</p>
                        </li>
                    </ul>
                    <ul>
                        <li>
                            <a href=""><img data-src="./images/img/search0407_03.jpg" alt=""></a>
                            <p>厦门</p>
                        </li>
                        <li>
                            <a href=""><img data-src="./images/img/search0407_04.jpg" alt=""></a>
                            <p>香港</p>
                        </li>
                    </ul>
                    <ul>
                        <li>
                            <a href=""><img data-src="./images/img/search0407_05.jpg" alt=""></a>
                            <p>法国</p>
                        </li>
                        <li>
                            <a href=""><img data-src="./images/img/search0407_06.jpg" alt=""></a>
                            <p>泰国</p>
                        </li>
                    </ul>
                    <ul>
                        <li>
                            <a href=""><img data-src="./images/img/search0407_07.jpg" alt=""></a>
                            <p>上海迪尼斯</p>
                        </li>
                        <li>
                            <a href=""><img data-src="./images/img/search0407_08.jpg" alt=""></a>
                            <p>云南</p>
                        </li>
                    </ul>

                </div>
                <div class="inland-nav ">
                    <ul>
                        <li>
                            <a href=""><img data-src="./images/img/guonei0407_03.jpg" alt=""></a>
                            <p>上海迪尼斯</p>
                        </li>
                        <li>
                            <a href=""><img data-src="./images/img/guonei0407_05.jpg" alt=""></a>
                            <p>稻城亚丁</p>
                        </li>
                    </ul>
                    <ul>
                        <li>
                            <a href=""><img data-src="./images/img/guonei0407_09.jpg" alt=""></a>
                            <p>九寨沟</p>
                        </li>
                        <li>
                            <a href=""><img data-src="./images/img/guonei0407_10.jpg" alt=""></a>
                            <p>乌镇</p>
                        </li>
                    </ul>
                    <ul>
                        <li>
                            <a href=""><img data-src="./images/img/guonei0407_13.jpg" alt=""></a>
                            <p>梨园</p>
                        </li>
                        <li>
                            <a href=""><img data-src="./images/img/guonei0407_14.jpg" alt=""></a>
                            <p>青海湖</p>
                        </li>
                    </ul>
                    <ul>
                        <li>
                            <a href=""><img data-src="./images/img/guonei0407_17.jpg" alt=""></a>
                            <p>上海迪尼斯</p>
                        </li>
                        <li>
                            <a href=""><img data-src="./images/img/guonei0407_18.jpg" alt=""></a>
                            <p>云南</p>
                        </li>
                    </ul>

                </div>
                <div class="foreign-nav">
                    <ul>
                        <li>
                            <a href=""><img data-src="./images/img/waiguo0407_03.jpg" alt=""></a>
                            <p>马尔代夫</p>
                        </li>
                        <li>
                            <a href=""><img data-src="./images/img/waiguo0407_05.jpg" alt=""></a>
                            <p>夏威夷</p>
                        </li>
                    </ul>
                    <ul>
                        <li>
                            <a href=""><img data-src="./images/img/waiguo0407_09.jpg" alt=""></a>
                            <p>巴厘岛</p>
                        </li>
                        <li>
                            <a href=""><img data-src="./images/img/waiguo0407_10.jpg" alt=""></a>
                            <p>曼谷</p>
                        </li>
                    </ul>
                    <ul>
                        <li>
                            <a href=""><img data-src="./images/img/waiguo0407_13.jpg" alt=""></a>
                            <p>西班牙</p>
                        </li>
                        <li>
                            <a href=""><img data-src="./images/img/waiguo0407_14.jpg" alt=""></a>
                            <p>拉斯维加斯</p>
                        </li>
                    </ul>
                    <ul>
                        <li>
                            <a href=""><img data-src="./images/img/waiguo0407_17.jpg" alt=""></a>
                            <p>上海迪尼斯</p>
                        </li>
                        <li>
                            <a href=""><img data-src="./images/img/waiguo0407_18.jpg" alt=""></a>
                            <p>云南</p>
                        </li>
                    </ul>

                </div>

            </div>

        </section>
        <!-- 底部 -->
        <footer class="tabbar">
            <a href="index.html">
                <div><img src="./images/icon/footer_0322_05.png" alt=""></div>
                <p>首页</p>
            </a>
            <a href="javascript:void(0)">
                <div><img src="./images/icon/footer_0322_02.png" alt=""></div>
                <p>目的地</p>
            </a>
            <a href="history.html">
                <div><img src="./images/icon/footer_0322_07.png" alt=""></div>
                <p>浏览历史</p>
            </a>
            <a href="myinfo.html">
                <div><img src="./images/icon/footer_0322_08.png" alt=""></div>
                <p>个人</p>
            </a>
        </footer>

    </section>
    <script src="./js/zepto.js"></script>
    <script src="./js/touch.min.js"></script>
    <script src="js/commen.js"></script>
    <script src="./js/search.js"></script>
</body>

</html>